<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet customLayer-svg 1.4.0</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
  <style>
    body {
      margin: 0;
    }
    #map {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
<div id="map"></div>
<div width="500" height="800" style="background: #000;"></div>
<script src="../../dist/Leaflet.CustomLayer.js"></script>
<script>
  var map = L.map("map", {
    zoomAnimation: true
  }).setView([39.910088, 116.401601], 3);

  L.tileLayer("https://{s}.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiZ2xlYWZsZXQiLCJhIjoiY2lxdWxoODl0MDA0M2h4bTNlZ2I1Z3gycyJ9.vrEWCC2nwsGfAYKZ7c4HZA")
    .addTo(map);

  function svgDOMUtil(tag, attrs) {
    var el= document.createElementNS("http://www.w3.org/2000/svg", tag);
    for (var k in attrs)
      el.setAttribute(k, attrs[k]);
    return el;
  }

  var maker;
  var onInit = function() {
    this.context = document.createElement("div");

    maker = document.createElement("div");
    maker.appendChild(document.createTextNode("Text"));
    Object.assign(maker.style, {
      position: "absolute",
      top: "0",
      left: "0",
      width: "100px",
      height: "100px",
      background: "rgba(0, 200, 200, 0.8)"
    });

    this.context.appendChild(maker);
    this.getContainer().appendChild(this.context);
  }
  var onRender = function() {
    this.setFullLayerBounds();
    var size = this._map.getSize();

    Object.assign(this.context.style, {
      position: "relative",
      top: "0",
      left: "0",
      width: size.x + "px",
      height: size.y + "px"
    });

    let point = map.latLngToContainerPoint({
      lat: 39.910088,
      lng: 116.401601
    });

    Object.assign(maker.style, {
      top: point.y + "px",
      left: point.x + "px"
    });
  }

  var divLayer = L.customLayer({
    container: document.createElement("div"), // DomElement
    padding: 0,
    minZoom: 3,
    maxZoom: 16,
    opacity: 1,
    visible: true,
    zIndex: 120
  });

  divLayer.on("layer-beforemount", function() {
    console.log("layer-beforemount");
  });

  divLayer.on("layer-mounted", function() {
    console.log("layer-mounted");
    onInit.bind(this)();
  });

  divLayer.on("layer-render", function() {
    console.log("layer-render");
    onRender.bind(this)();
  });

  divLayer.on("layer-beforedestroy", function() {
    console.log("layer-beforedestroy");
  });

  divLayer.on("layer-destroyed", function() {
    console.log("layer-destroyed");
  });

  divLayer.addTo(map);
</script>
</body>
</html>
